import { initSearchConfig, TableSearchPanel, XxpageContainer, XxRangePicker, XxTable } from "@/ui";
import React, { useEffect, useRef, useState } from "react";
import searchFields from "./config/searchFields";
import getColumns from "./config/columns";
import DictDataForm from "./dictDataForm";
import getActoinPanel from "./config/action";
import { useLocation } from "react-router-dom";
import { dictDataApi } from "@/api";
import { AliveScope } from 'react-activation';
import { deleteConfirm, successAlert } from "@/common/methods";

/**@description 字典数据页面 */
const DictDetail = () => {
    const location = useLocation();
    const [dictType, setDictType] = useState(location.state.dictType || sessionStorage.getItem("dictType")||null)
    useEffect(() => {
        setDictType(location.state.dictType);
        sessionStorage.setItem("dictType", location.state.dictType);
    }, [location])
    const dictDataRef = useRef();
    const [params, setParams] = useState({ ...initSearchConfig(searchFields, { dictType }) })
    const [state, setState] = useState({
        data: [],
        totalCount: 0
    })
    const [loading, setLoading] = useState(false);



    // //搜索事件
    const onClickSearch = (value) => {
        setParams({
            ...params,
            ...value,
            current: 1,
        });
    };


    // /**@description 查找字典列表 */
    const getList = async () => {
        setLoading(true);
        const { code, msg, data } = await dictDataApi.postDictDataList({ pageSize: 10, current: 1, dictType: dictType });
        setState({
            data: [...data.list],
            totalCount: data.totalCount || 0
        })
        setLoading(false);

    }

    const onChange = (current, pageSize) => {
        setParams({
            ...params,
            current,
            pageSize
        })
    }



    /**  @description 打开编辑窗口 */
    const open = ({ actionType = String, record = Object }) => {
        dictDataRef.current.open({
            actionType,
            record: { dictType, ...record }
        })
    }

    /**@description 删除按钮操作 */
    const handleDelete = async (id) => {
        try {
            await deleteConfirm();
            const { code, msg } = await dictDataApi.deleteDictData(id)
        } catch (error) {

        } finally {
            getList()
        }
    }





    const [selectedKeys, setSelectedKeys] = useState([])
    const onSelectChange = (newSelectedRowKeys, selectedRows) => {
        setSelectedKeys(newSelectedRowKeys);
    }
    const columns = getColumns({
        open, handleDelete
    })
    const actions = getActoinPanel({ open: open })
    // console.log("字典页面 获取功能区", actions)
    const tableProps = {
        showActionPanel: true,
        tablePanelConfig: actions,
        loading: loading,
        columns: columns,
        dataSource: state.data,
        pagination: {
            total: state.totalCount,
            pageSize: params.pageSize,
            onChange: onChange,
            current: params.current
        },
        rowSelection: {
            selectedRowKeys: selectedKeys,
            onChange: onSelectChange,
        },
        rowKey: 'id',
        selectedRowKeys: selectedKeys,
        onRow: (record, index) => {
            return {
                onDoubleClick: () => {
                    console.log("双击", record);
                }
            }
        },
    }


    useEffect(() => {
        getList()
    }, [params])
    return (
        <XxpageContainer>
            <DictDataForm onRef={dictDataRef} getList={getList} />
            <TableSearchPanel
                fields={searchFields}
                onSearch={onClickSearch}

            />
            <XxTable  {...tableProps} />

        </XxpageContainer>
    )
}
// export default DictDetail;
// 如果需要在路由级别控制缓存，可以创建一个包裹 DictDetail 的组件
const CachedDictDetail = () => {
    return (
        <AliveScope>
            <DictDetail />
        </AliveScope>
    );
};

// 导出 CachedDictDetail 而不是原始的 DictDetail
export default CachedDictDetail;